import { useEffect, useRef, useState } from 'react';
import { useParams, useModel } from 'umi';
import { createFromIconfontCN, UnorderedListOutlined } from '@ant-design/icons';
import { isExpired } from '@/services/swagger/vrPreviewController';
import ExpirePage from './components/ExpirePage';
import Compass from './components/Compass';
import Banner from './components/Banner';
import FuncBtns from './components/FuncBtns';
import { findInstanceByMap } from '@/services/swagger/instanceController';
import PanoramaCanvas from './components/Canvas';
import Layers from './components/Layers';
import Guide from './components/Guide';
import LeaveMessage from './components/LeaveMessage';
import PanoramaList from './components/PanoramaList';
import DataModal from './components/DataModal';
import DialogA from './components/Dialog/DialogA';
import DialogB from './components/Dialog/DialogB';
import IntroCard from './components/IntroCard';
import ProcessDrawing from './components/ProcessDrawing';
import Thumbnail from './components/Thumbnail';

import './index.less';
import './moblie.less';
const IconFont = createFromIconfontCN({
  scriptUrl: ['/iconfont/iconfont.js'],
});

const PanoramaView = () => {
  const params: any = useParams();
  const { instanceId } = params;
  const [loading, setLoading] = useState(true);
  const { isMobile } = useModel('mobile', (ret) => ({
    isMobile: ret.isMobile,
  }));

  const [flag, setFlag] = useState<boolean>(false);

  const { instanceConf, setInstanceConf, isGuideShow, modalShow, setModalShow, panoramaData } =
    useModel('Panorama.data', (ret) => ({
      isGuideShow: ret.modalShow.isGuideShow,
      modalShow: ret.modalShow,
      setModalShow: ret.setModalShow,
      setInstanceConf: ret.setInstanceConf,
      instanceConf: ret.instanceConf,
      panoramaData: ret.panoramaData,
    }));

  /**
   * 基础全局配置
   */
  const setConfig = () => {
    findInstanceByMap({ ems_instance_id: instanceId }).then((res) => {
      const list = res.result?.list || [];
      const instanceData: any = list[0];
      if (instanceData) {
        let conf = { ...JSON.parse(instanceData.ems_instance_globeconf), ...instanceData };
        setInstanceConf(conf);
      }
    });
  };

  useEffect(() => {
    isExpired({ accessUrl: window.location.href }).then((res) => {
      setFlag(!res.result);
      setLoading(false); // 设置加载完成
      if (res.result) {
        return;
      }
      setConfig();
    });
  }, []);

  if (loading) {
    return <div>Loading...</div>; // 显示加载状态
  }

  return (
    <>
      {flag ? (
        <div className="panoramaViewBox">
          <div className={`panoramaView-${isMobile ? 'mobile' : 'web'}`}>
            <div className="banner">
              <Banner />
            </div>
            <h1 className="banner-header">环保设施向公众开放沉浸式展厅</h1>
            <div className="logo">
              <img
                src={
                  instanceConf?.logoImgFile?.ems_sysfile_path
                    ? `/systemfile${instanceConf?.logoImgFile?.ems_sysfile_path}`
                    : require('@/assets/images/panoramicTool/logo.png')
                }
                alt=""
              />
            </div>
            <div className="funcBtns">
              <FuncBtns />
            </div>
            <div className="layers">
              <Layers />
            </div>
            <div
              className="list"
              onClick={() => {
                modalShow.isListShow = !modalShow.isListShow;
                setModalShow({
                  isThumbnailShow: modalShow.isThumbnailShow,
                  isIntroShow: false,
                  isListShow: modalShow.isListShow,
                  isGuideShow: false,
                });
              }}
            >
              <UnorderedListOutlined className="icon-list" />
              <div>场景</div>
            </div>

            <Compass />
            <div className="leftIcon">
              {panoramaData?.ems_panorama_default === 1 ? <IntroCard /> : <ProcessDrawing />}
              {/* 留言 */}
              <LeaveMessage />
              <div
                className="guide"
                onClick={() => {
                  modalShow.isGuideShow = !modalShow.isGuideShow;
                  setModalShow({
                    isThumbnailShow: modalShow.isThumbnailShow,
                    isIntroShow: false,
                    isListShow: false,
                    isGuideShow: modalShow.isGuideShow,
                  });
                }}
              >
                <IconFont
                  type="icon-daolan"
                  className={isGuideShow ? 'icon-guide selected' : 'icon-guide'}
                />
                <div className={isGuideShow ? 'selected' : ''}>导览</div>
              </div>
            </div>
            <PanoramaList />
            <Guide />
            {/* 任务窗口 */}
            <DataModal />
            <PanoramaCanvas />
            <DialogA />
            <DialogB />

            {/* 缩略图 */}
            <Thumbnail />
          </div>
        </div>
      ) : (
        <ExpirePage />
      )}
    </>
  );
};
export default PanoramaView;
